<template>
  <div class="search-bar">
    <el-form :inline="true" :model="formItem" class="form-filter" size="mini">
      <el-form-item>
        <el-date-picker
          v-model="dateList"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item>
        <el-button plain icon="el-icon-search" @click="search" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// 定义一个查询表单原始项
const formItem = {
  s_deleteFlag: false,
  s_beforeStartTime: new Date().getTime(),
  s_isUser: true,
  s_afterEndTime: null
}

export default {
  name: 'DutyTableFilter',

  data() {
    return {
      dateList: [],
      formItem: {
        ...formItem
      },
      pickerOptions: { // 限制收货时间不让选择今天以前的
        disabledDate(time) {
          return time.getTime() < new Date().getTime()
        }
      }
    }
  },
  methods: {
    // 查询按钮点击事件处理
    search: function() {
      if (this.dateList && this.dateList.length === 2) {
        this.formItem.s_beforeStartTime = new Date(this.dateList[0]).getTime()
        this.formItem.s_afterEndTime = new Date(this.dateList[1]).getTime()
      } else {
        this.formItem.s_beforeStartTime = new Date().getTime()
        this.formItem.s_afterEndTime = null
      }
      this.$parent.filter(this.formItem)
    },
    // 重置按钮点击事件处理
    reset: function() {
      this.formItem = {
        ...formItem
      }
      this.search()
    }
  }
}
</script>
